<template>
	<view class="content">
		<view class="c2cTrade">
			<template v-if="type=='BUY'">
				<view class="nav_top">
					<image src="../../../static/c2c/b_sel.png" mode=""></image>
					<view class="b_line"></view>
					<image v-if="status==0" src="../../../static/c2c/g_sel.png" mode=""></image>
					<image v-if="status==2" src="../../../static/c2c/b_sel.png" mode=""></image>
					<view v-if="status==0" class="g_line"></view>
					<view v-if="status==2" class="b_line"></view>
					<image v-if="status==0" src="../../../static/c2c/g_sel.png" mode=""></image>
					<image v-if="status==2" src="../../../static/c2c/b_sel.png" mode=""></image>
					<view class="g_line"></view>
					<view v-if="false" class="b_line"></view>
					<image src="../../../static/c2c/g_sel.png" mode=""></image>
				</view>
				<view class="nav_word">
					<text class="active">下订单</text>
					<text :class="status==2?'active':''">去线下付款</text>
					<text :class="status==2?'active':''">点击已付款</text>
					<text>等放币</text>
				</view>
				<view v-if="status==0" class="cancel_btn" @click="isCancel=true">
					取消订单
				</view>
				<view class="top">
					<view class="left">
						<text>订单编号：{{ order }}</text>
						<image @click="copy(order)" src="../../../static/copy.png" mode=""></image>
					</view>
					<text v-if="status==0">待支付</text>
					<text v-if="status==2">等待对方放币</text>
				</view>
			</template>	
				<template v-if="type=='SELL'">
					<view class="nav_top">
						<image src="../../../static/c2c/b_sel.png" mode=""></image>
						<view class="gc_line"></view>
						<image v-if="status==0" src="../../../static/c2c/g_sel.png" mode=""></image>
						<image v-if="status==2" src="../../../static/c2c/b_sel.png" mode=""></image>
						<view class="c_line"></view>
						<view v-if="false" class="gc_line"></view>
						<image src="../../../static/c2c/g_sel.png" mode=""></image>
					</view>
					<view class="nav_word">
						<text class="active">下订单</text>
						<text :class="status==2?'active':''">等待对方付款</text>
						<text :class="status==2?'active':''">去放币</text>
					</view>
					<view v-if="status==0" class="cancel_btn" @click="isCancel=true">
					</view>
					<view class="top">
						<view class="left">
							<text>订单编号：{{ order }}</text>
							<image @click="copy(order)" src="../../../static/copy.png" mode=""></image>
						</view>
						<text v-if="status==0">待放币</text>
						<text v-if="status==2">等待对方放币</text>
					</view>
				</template>
			<view class="block">
				<view class="one">
					<view class="tb">
						<text class="ll">卖家</text>
						<text>财神宝宝</text>
					</view>
					<view class="tb">
						<text class="ll">实名信息</text>
						<text>李三</text>
					</view>
					<view class="tb">
						<text class="ll">订单金额(CNY)</text>
						<text>100.00</text>
					</view>
					<view class="tb">
						<text class="ll">数量(USDT)</text>
						<text>13.53</text>
					</view>
					<view class="tb">
						<text class="ll">单价(CNY)</text>
						<text>7.29</text>
					</view>
					<view class="tb">
						<text class="ll">下单时间</text>
						<text>2020-03-13 15:38:41</text>
					</view>
					<view class="tb">
						<text class="ll">备注</text>
						<text style="line-height: 1.2;">转账不需要有任何备注</br>请实名支付！</text>
					</view>
				</view>
				<template v-if="type=='BUY'">
					<view class="two" v-if="status==0">
						<view class="wway" @click="payway=true">
							<text class="sway">付款方式：</text>
							<view class="sel">
								<text>切换</text>
								<uni-icons type="arrowright" :size="24" :color="'#C5CFD5'" style="margin-right: -14rpx;"></uni-icons>
							</view>
						</view>
						<view class="way_block" v-if="paytype=='card'">
							<view class="ll">
								<image style="margin-bottom: 38rpx;" src="../../../static/c2c/yhk.png"></image>
								<text>银行卡</text>
							</view>
							<view class="rr">
								<text class="name">工商银行</text>
								<view class="account">
									<text>李三</text>
									<image src="../../../static/copy.png" mode=""></image>
								</view>
								<view class="num">
									<text>6214832309650666</text>
									<image src="../../../static/copy.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="way_block" v-if="paytype=='zfb'">
							<view class="ll">
								<image style="height: 44rpx;" src="../../../static/c2c/zfb.png"></image>
								<text>支付宝</text>
							</view>
							<view class="zfb">
								<view class="account">
									<text>李三</text>
									<image src="../../../static/copy.png" mode=""></image>
								</view>
								<view class="num">
									<text>15818111880</text>
									<image src="../../../static/copy.png" mode=""></image>
								</view>
								<image @click="showDown('../../../static/c2c/zfb.png')" class="pic" src="../../../static/c2c/zfb.png" mode=""></image>
								<view class="tip">
									（点击保存图片）
								</view>
							</view>
						</view>
						<view class="way_block"  v-if="paytype=='wx'">
							<view class="ll">
								<image style="height: 44rpx;margin-left: 4rpx;" src="../../../static/c2c/wx.png"></image>
								<text>微信</text>
							</view>
							<view class="zfb">
								<view class="account">
									<text>李三</text>
									<image src="../../../static/copy.png" mode=""></image>
								</view>
								<view class="num">
									<text>15818111880</text>
									<image src="../../../static/copy.png" mode=""></image>
								</view>
								<image @click="showDown('../../../static/c2c/wx.png')" class="pic" src="../../../static/c2c/wx.png" mode=""></image>
								<view class="tip">
									（点击保存图片）
								</view>
							</view>
						</view>
					</view>
					<template v-if="status==2">
						<view class="wway" @click="payway=true">
							<text class="sway">付款信息</text>
						</view>
						<view class="one">
							<view class="tb">
								<text class="ll">收款方式</text>
								<text>微信<text style="color: #C5CFD5;"> (加好友发红包付款！！！)</text></text>
							</view>
							<view class="tb">
								<text class="ll">收款人姓名</text>
								<text>李三</text>
							</view>
							<view class="tb">
								<text class="ll">支付金额</text>
								<text>20.00(CNY)</text>
							</view>
							<view class="tb">
								<text class="ll">支付时间</text>
								<text>2020-03-13 17:41:43</text>
							</view>
						</view>
						<view class="chats">
							<view class="count">
								<text>
									159:59
									<text class="gray">后超时自动放币</text>
								</text>
								<text>取消订单</text>
							</view>
							<view class="blue_btn" @click="$goPage(`../c2cService/c2cService?name=李三`)">
								在线沟通
							</view>
						</view>	
					</template>
					
				</template>
				<template v-if="status=='0'">
					<view class="three">
						<view class="remind">
							交易提醒：	
						</view>
						<view class="remind_content">
							<view class="">
								1.<text class="red">请勿备注任何</text>关于XXXXXXXX以及其他数字资产名称字 眼的信息于转账备注，防止造成您的汇款被拦截，支付宝 被冻结等问题
							</view>
							<view class="">
								2.非工作时间<text class="gray">(节假日及工作日的17:00-8:00)</text>大于五万以 上的跨行汇款，请分批支付<text class="gray">(少于五万汇款可及时到账)</text>
							</view>
							<view class="">
								3.请使用及时到账支付方式，支付宝转银行卡、2小时内汇 款等支付方式造成1小时未到账订单，卖家有权退回款项并取消订单
							</view>
						</view>
					</view>
					<template v-if="type=='BUY'">
						<view class="say">
							如您已向卖家线下转账付款，请务必点击右下角“已付款，请放币”按 钮，否则有可能造成您的资金损失
						</view>
						<view class="status_btm">
							<view class="msg" @click="$goPage(`../c2cService/c2cService?name=李三`)">
								<image src="../../../static/c2c/msg.png" mode=""></image>
								<text>在线沟通</text>
							</view>
							<view class="status" @click="pay()">
								已付款，请放币（14:59）
							</view>
						</view>
					</template>
					<template v-if="type=='SELL'">
						<view class="say">
							请您前往银行客户端、支付宝账户、微信钱包查询钱钱已到账再进行放币操作，到账短信不可作为付款凭据！
						</view>
						<view class="status_btm">
							<view class="msg" @click="$goPage(`../c2cService/c2cService?name=李三`)">
								<image src="../../../static/c2c/msg.png" mode=""></image>
								<text>在线沟通</text>
							</view>
							<view class="status" @click="pay()">
								确认收款，去放币（14:59）
							</view>
						</view>
					</template>
				</template>
			</view>
		</view>
		<!-- 取消 -->
		<Cancel :title="'取消订单'" v-if="isCancel" @close="closeModal('isCancel')">
		  <view class="common_model">
		    <view class="model_text">
		    	当天取消多次将冻结法币交易功能 是否确认取消订单？
		    </view>
		    <view class="common_btn">
		      <view style="color: #1882D4;" @click="closeModal('isCancel')">再想想</view>
		      <view class="active" @click="buySell(isCancel, true)">确认取消</view>
		    </view>
		  </view>
		</Cancel>
		<!-- 评价 -->
		<Modal v-if="showEvaluate" :title="'评价'" @close="closeModal()">
			<view class="msg_model">
				<view class="block2">
					<view class="good" @click="good = true">
						<image v-if="good" src="../../../static/c2c/good1.png" mode=""></image>
						<image v-if="!good" src="../../../static/c2c/good2.png" mode=""></image>
						<text>好评</text>
					</view>
					<view class="good" @click="good = false">
						<image v-if="!good" src="../../../static/c2c/bad1.png" mode=""></image>
						<image v-if="good" src="../../../static/c2c/bad2.png" mode=""></image>
						<text>差评</text>
					</view>
				</view>
				<view class="colse">提交</view>
			</view>
		</Modal>
		<!-- 交易说明 -->
		<Modal v-if="showExplain" :title="'交易说明'" @close="closeModal()">
			<view class="msg_model">
				<view>
					<view class="block3">1.您的汇款将直接汇入卖方提供的账户，卖方的数字资产在平台担 保质押，待对方确认。</view>
					<view class="block3">2.请确认对方的收款账户和姓名，并备注中注明。</view>
					<view class="block3">3.大额支付时，请完成第一笔汇款后即点击确认支付。</view>
					<view class="block3">4.你作为普通每天可以无责取消一次买入订单，超过取消次数你将 会被禁止当日主动发起交易。</view>
				</view>
				<view class="colse" @click.stop="closeModal()">我知道了</view>
			</view>
		</Modal>
		<!-- 确认放币 -->
		<Modal v-if="showOut" :title="'确认放币'" @close="closeModal()">
			<view class="msg_model">
				<view class="block4">确认放币后，锁定的币将会划转到对方账户</view>
				<view class="subto">
					<view class="no">
						取消
					</view>
					<view class="yes">
						确认放币
					</view>
				</view>
			</view>
		</Modal>
		<!-- 切换付款方式 -->
		<view v-if="payway" class="pay_mask" @click.stop="closeModal('payway')"></view>
		<view v-if="payway"  class="pay_Modal">
			<view class="Modal_title">
				<text class="no" @click.stop="closeModal('payway')">取消</text>
				<text class="one">切换付款方式</text>
				<text class="yes" @click.stop="closeModal('payway')">确认</text>
			</view>
			<view class="list">
				<view class="block" @click="paytype='card'">
					<view class="left" :class="paytype=='card'?'active':''">
						<image style="height: 38rpx;" src="/static/c2c/yhk.png" mode=""></image>
						<text class="name">李四</text>
						<text style="margin-right: 40rpx;">工商银行</text>
						<text>6666666666666666</text>
					</view>
					<view class="right"><uni-icons v-if="paytype=='card'" type="checkmarkempty" :size="36" :color="'#1882D4'" style="margin-right: -14rpx;"></uni-icons></view>
				</view>
				<view class="block" @click="paytype='zfb'">
					<view class="left" :class="paytype=='zfb'?'active':''">
						<image src="/static/c2c/zfb.png" mode=""></image>
						<text class="name">李四</text>
						<text>15818111880</text>
					</view>
					<view class="right"><uni-icons v-if="paytype=='zfb'" type="checkmarkempty" :size="36" :color="'#1882D4'" style="margin-right: -14rpx;"></uni-icons></view>
				</view>
				<view class="block" @click="paytype='wx'">
					<view class="left" :class="paytype=='wx'?'active':''">
						<image src="/static/c2c/wx.png" mode=""></image>
						<text class="name">李四</text>
						<text>15818111880</text>
					</view>
					<view class="right"><uni-icons v-if="paytype=='wx'" type="checkmarkempty" :size="36" :color="'#1882D4'" style="margin-right: -14rpx;"></uni-icons></view>
				</view>
			</view>
		</view>
		
		<!-- 点击保存图片 -->
		<view v-if="saveImg" class="Modal_mask" @click="saveImg=false"></view>
		<view class="c_modal" v-if="saveImg">
			<image :src="pic" mode="widthFix"></image>
		</view>
		<image v-if="saveImg" @click="downImg(pic)" class="down" src="../../../static/account/down.png" mode=""></image>
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages"></HMmessages>
	</view>
</template>

<script>
import HMmessages from '@/components/HM-messages/HM-messages.vue';
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import Modal from '@/components/msg-modal/index.vue';
import Cancel from '@/components/lkex-modal/index.vue';
export default {
	components: { uniIcons, Modal, HMmessages,Cancel},
	data() {
		return {
			type: '',
			coin: '',
			showBank: false,
			showZfb: false,
			showWx: false,
			showEvaluate: false,
			good: true,
			showExplain: false,
			showOut: false,
			order: '123123',
			name: '张三',
			bank: '中国银行',
			bbank: '广州分行',
			card: '453453',
			payway: false,
			paytype: 'card',
			isCancel: false,
			saveImg: false,
			pic:'',
			status: 0,
		};
	},
	computed: {},
	onLoad(option) {
		if (option && option.type) {
			this.type = option.type;
			this.coin = option.coin;
			if (option.type == 'BUY') {
				uni.setNavigationBarTitle({
					title: '购买' + option.coin
				});
			}
			if (option.type == 'SELL') {
				uni.setNavigationBarTitle({
					title: '出售' + option.coin
				});
			}
		}
	},
	onShow() {},
	onNavigationBarButtonTap(e) {
		this.showExplain = true;
	},
	methods: {
		//打开下载
		showDown(pic) {
			this.saveImg = true;
			this.pic = pic;
		},
		//已付款
		pay() {
			this.status = 2;
		},
		//下载图片
		downImg(pic) {
			if (pic != "") {
				uni.saveImageToPhotosAlbum({
					filePath: pic,
					success: function () {
						uni.showToast({
							title: '图片保存成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			}
		},
		//隐藏弹窗
		closeModal(name) {
			this[name] = '';
		},
		showMsg(type) {
			if (type == 'bank') {
				this.showBank = true;
			}
			if (type == 'zfb') {
				this.showZfb = true;
			}
			if (type == 'wx') {
				this.showWx = true;
			}
			if (type == 'evaluate') {
				this.showEvaluate = true;
			}
			if (type == 'showExplain') {
				this.showExplain = true;
			}if (type == 'showOut') {
				this.showOut = true;
			}
		},
		//错误提示
		errors(text) {
			this.HMmessages.show(text, {
				textAlign: 'center',
				background: '#74272d',
				fontColor: '#fff'
			});
		},
		//复制
		copy(text) {
			let that = this;
			uni.setClipboardData({
				data: text,
				success: () => {
					that.HMmessages.show('复制成功', {
						textAlign: 'center',
						background: '#356e36',
						fontColor: '#fff'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import './style.scss';
</style>
